<template>
   <!-- 弹出规格选项 -->
    <view class="popup">
      <view class="mask" @touchmove.stop.prevent="moveHandle" v-if="showModal" @tap="onhide"></view>
      <view @touchmove.stop.prevent="moveHandle" :class="'sku ' + (showModal==true ? 'shows':'')" :style="{bottom: showModal == true ? bottoms+'upx': ''}">
        <view class="sku_top" v-if="currentSku">
          <image :src="imageUrl + goods.thumbnail" class="top_img"></image>
          <view class="sku_title">
           {{nowList.name}}
          </view>
          <view class="moneys">
          <!-- 这里的价格是选择完规格后计算的价格 -->
            ￥{{(Number(currentSku.discountPrice || currentSku.originalPrice) * number).toFixed(2)}}
          </view>
           <view class="kucun">
          <!-- 这里的价格是选择完规格后计算的库存 -->
            库存: {{currentSku.repertory}}
          </view>
        </view>
        <block v-if="nowList.skuList && nowList.skuList.length !== 0">
          <view v-for="(item, index) in nowList.skuList" :key="index" class="sku_list">
            <view class="sku_tag">
				<button class="tag_s" @tap="setTag(item,index)" :style="{color:currentSku._id == item._id ? colors :'#333333',background:currentSku._id == item._id ? '#fff' :'',borderColor:currentSku._id == item._id ? colors :''}">
					 {{item.name}}
				</button>
            </view>
          </view>
        </block>
          <view class="number">
            <view class="n_left">购买数量</view>
            <view class="n_right">
              <text class="jian" @tap="onreduce">－</text>
              <input :value="number" disabled type="number" maxlength="2" class="inputs"></input>
              <text class="jia" @tap="onadd">＋</text>
            </view>
          </view>
          <view class="btn_box">
            <view class="addcart_btn" :style="'background-color:' + colors" @tap="onsubmit('add')">加入购物车</view>
            <view class="submit" :style="'background-color:' + colors" @tap="onsubmit('pay')">立即购买</view>
          </view>
      </view>
    </view>
</template>

<script>
	import config from '@/config.js'
import {getCart, setCart , setGoodsData, getToken} from '@/utils/auth.js'
export default {
  data() {
    return {
      number: 1,
      current: "",
	  currentSku:{}, //选择后的规格详情
	  issku: false ,//判断当前商品是否存在规格
	  update: true,
	  nowList:{},
	   imageUrl: config.network.imageUrl
    };
  },
  components: {},
  props: {
    colors: {
      type: String
    },
    showModal: {
      type: Boolean,
      default: false
    },
    goods: {
      type: Object,
	  default() {
		  return {
			name: '',
			thumbnail: '',
			skuList: [],
			classify: []
		  }
	  }
    },
	bottoms:{
	  type: String,
	  default: '0'
	}
  },
  computed:{
	  skuArr() {
	  	return this.goods.skuList;
	  }
  },
  watch:{
	  goods: {
		  immediate: true,
		  handler(val) {
			  if (val && val.skuList) {
				  this.currentArr = [];
				  this.issku = false;
				  this.number = 1;
				  this.currentSku = val.skuList[0];
				  this.nowList = val;
			  }
		  }
	  }
  },
  methods: {
   moveHandle(){
	 return  
   },
   setTag(items, current) {
	   this.currentSku = items;
   },
    onhide() {
      //隐藏规格对话框
	  this.$emit('onhide')
    },

    onadd() {
      //加
      let data = this.number + 1;
      this.setData({
        number: data
      });
    },

    onreduce() {
      //减
      if (this.number <= 1) {
        return;
      } else {
        let data = this.number - 1;
        this.setData({
          number: data
        });
      }
    },

    onsubmit(value) {
      //提交购物车
     //此处应调用接口来添加购物车 现模拟添加到购物车
     const datas = Object.assign({
		currentSku: this.currentSku,
		number: this.number 
	 }, this.nowList);
     if(value == 'add'){ //如果是添加购物车
     	setCart(datas)
     	// 存储商品数据
     	uni.showToast({
     	  title: '加入购物车成功 !',
     	  icon: 'none'
     	});
     	/**
     	 * 模拟获取购物车的数量 getCart
     	 */
     	let cart = getCart().length
     	uni.setTabBarBadge({
     	  //给tabBar添加角标
     	  index: 2,
     	  text: String(cart)
     	});
     }else{ //如果是购买商品
	 // 此处应该判断是否登录 如果没登录 跳转到登录页
		 if(!getToken()){
				uni.switchTab({
					url: '/pages/views/tabBar/user'
				})
				return
		 }
     	let goods = []
     	goods.push(datas)
     	setGoodsData(goods) //存储商品信息和商品规格
     	uni.navigateTo({  //提交订单
     		url:'/pages/views/order/confirmOrder'
     	})
     }
     this.$emit('onhide')
    },
	// 处理规格多选情况下 符合条件的规格 并把不符合条件的规格禁用
	getAllSku(){
		let newSku = []
		for(let key of this.skuArr){ //遍历可用规格数组
			if(key.stock <= 0){ //如果规格现有的库存小于等于0
				continue
			}
			var isOk = true
			this.currentArr.forEach((sku)=>{
				// sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除
				if(sku.toString() !== '' && key.goods_sku_arr.indexOf(sku.toString()) < 0){
					isOk = false
				}
			})
			if(isOk == true){
				newSku.push(key)
			}
		}
		return newSku
	}
  }
};
</script>
<style scoped lang="scss">
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 900;
  opacity: 0.7;
}
.sku{
  width: 100vw;
  min-height: 30vh;
  position: fixed;
  bottom: -100%;
  z-index: 910;
  left: 0;
  background-color: #ffffff;
  padding: 20upx 4%;
  border-top-left-radius: 10upx;
  border-top-right-radius: 10upx;
  border-bottom: 1upx solid #eee;
  transition: all 0.3s;
}
.shows{
  bottom: 0;
  transition: all 0.3s;
}
.sku_top{
  overflow: hidden;
  margin-top: 20upx;
}
.sku_top .top_img{
  height: 170upx;
  width: 170upx;
  float: left;
  margin-right: 15upx;
  border-radius: 8upx;
}
.sku_top .sku_title{
  font-size: 30upx;
  line-height: 35upx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sku_top .moneys{
  font-size: 30upx;
  line-height: 40upx;
  overflow: hidden;
  margin-top: 20upx;
  font-weight: bold;
  color: $mycolor;
}
.sku_top .kucun{
  font-size: 24upx;
  color: #999;
  overflow: hidden;
}
.sku_list{
  margin-top: 20upx;
  overflow: hidden;
  margin-bottom: 40upx;
}
.sku_name{
  font-size: 24upx;
  color: #666;
  overflow: hidden;
}
.sku_tag{
  overflow: hidden;
  margin-top: 20upx;
}
.sku_tag .tag_s{
  height: 60upx;
  line-height: 60upx;
  align-items: center;
  padding: 0 20upx;
  text-align: center;
  font-size: 26upx;
  color: #202020;
  background-color: #F5F5F5;
  border: 1upx solid #F5F5F5;
  float: left;
  border-radius: 40upx;
  margin-right: 20upx;
  transition: all 0.2s;
  margin-bottom: 20upx;
  font-weight: 500;
  &::after{
	  border: none;
  }
}
.number{
  margin-top: 10upx;
  border-top: 1upx solid #ccc;
  width: 100%;
  height: 80upx;
  line-height: 80upx;
  padding-top: 10upx;
}
.number .n_left{
  float: left;
  font-size: 28upx;
  color: #333;
}
.number .n_right{
  float: right;
  height: 60upx;
  width: 200upx;
  background-color: #F5F5F5;
  margin-top: 10upx;
  border-radius: 5upx;
}
.n_right .jian,.jia{
  width: 60upx;
  height: 60upx;
  text-align: center;
  line-height: 60upx;
  font-size: 42upx;
}
.jian{
  float: left;
}
.jia{
  float: right;
}
.jian:active{
  background-color: #eee;
}
.jia:active{
  background-color: #eee;
}
.n_right .inputs{
  width: 76upx;
  float: left;
  text-align: center;
  margin-top: 6upx;
}
.btn_box{
  margin-top: 40upx;
}
.btn_box .addcart_btn, .submit{
  width: 40vw;
  height: 60upx;
  line-height: 60upx;
  border-radius: 42upx;
  font-size: 26upx;
  text-align: center;
  color: #ffffff;
  float: left;
  margin-left: 30upx;
  margin-bottom: 30upx;
}
.btn_box .addcart_btn:active{
  opacity: 0.8;
}
.btn_box .submit:active{
  opacity: 0.8;
}
.ondisabled{
	background-color: #F9F9F9;
	opacity: 0.5;
}
</style>